<template>
  <div class="home">
    <!-- 主体地图显示 -->
    <el-container style="height: 30%;">
      <!-- <el-aside>111</el-aside> -->
      <el-main>
        <!-- 顶部工具栏 -->
        <!-- <top-tool-bar @alarmchind="alarmchind" /> -->
        <!-- 地图显示 -->
        <map-view></map-view>
      </el-main>
      <!-- 报警信息 -->
      <!-- <el-aside v-if="showWarningInfo">
        <vdr class="vdr" :w="200" :h="50" @resizing="resizeWidth" :draggable="false">
          
          <warning-view></warning-view>
        </vdr>
      </el-aside> -->
    </el-container>
    <!-- 底部信息列表 -->
    <el-footer :class="hideFooter ? 'height0' : ''">
      <vdr 
        class="vdr" 
        @resizing="resize" 
        :draggable="false" 
      >
        <div ref="footerTitle" class="footer_title">
          设施维护列表
          <i class="iconfont icon-shanchu" @click="toHideFooter()"></i>
        </div>
          <station-view></station-view>
      
      </vdr>
    </el-footer>
    <div class="cover" v-if="coverIsShow" @click="closeCover"></div>
    <!-- 右键视频监控窗口 -->
    <el-dialog
      :title="dialogVisibleCCTVTitle"
      :visible.sync="dialogVisibleCCTV"
      width="720px"
      height="50%"
    >
      <iframe v-bind:src="dialogVideoUrl" frameborder="0" width="100%" height="500px"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCCTV = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleCCTV = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入地图组件
import mapView from '@/views/Rubbish/FacilityManagement/PlaceStationMap.vue'
// 引入中转站组件
import StationView from '@/views/Rubbish/FacilityManagement/PlaceStation.vue'
// 引入处理厂组件
import FactoryView from '@/views/Rubbish/FacilityManagement/PlaceFactory.vue'
// 引入垃圾点组件
import PointView from '@/views/Rubbish/FacilityManagement/PlacePoint.vue'
// 引入报警组件
// import warningView from '@/views/Rubbish/Map/RubbishWarning.vue'

import eventBus from '@/eventBus.js'

import export2Excel from '@/utils/exportExcel/index.js'

export default {
  components: {
    'map-view': mapView,
    'station-view': StationView,
  },
  data () {
    return {
      dialogVisibleCCTV: false,
      dialogVisibleCCTVTitle: "",
      dialogVideoUrl: '',
      areaName: '',
      coverIsShow: false,
      originalData: [],
      warningData: [],
      // warningType: ['', '脱岗报警', 'SOS报警', '心跳异常报警', '滞留报警', '长时间不上传位置报警', '一人多终端佩戴报警', '血压异常报警', '未知报警', '', '开机', '关机', '', '', '低电量报警'],
      warningTypeList: [],
      warningTypeValue: '全部',
      warningLICENSE_PLATEValue: '',
      warningGroupList: [],
      warningGroupValue: '',
      sort: { prop: 'VID', order: 'ascending' },
      openWarningDetails: false,
      containerHeight: 0,
      footerHeight: 0,
      mainWidth: 0,
      asideWidth: 0,
      avatarShow: false,
      hideFooter: false,
      showWarningInfo: true,
    }
  },
  mounted () {
    eventBus.$emit('mapSize', document.querySelector('.el-main').clientHeight - 32)
    this.containerHeight = document.querySelector('.el-container').clientHeight
    this.footerHeight = document.querySelector('.el-footer').clientHeight
    this.mainWidth = document.querySelector('.el-main').clientWidth
    // this.asideWidth = document.querySelector('.el-aside').clientWidth

  },
  created () {

    this.getAreaName()
    eventBus.$on('isCover', val => {
      this.coverIsShow = val
    })
    // 报警信息列表
    eventBus.$on('warningData', val => {
      this.originalData = val
      this.warningTypeList = new Set(this.warningTypeList)
      eventBus.$emit('warningNum', this.originalData.length)
      this.searchWarningData()
    })
    eventBus.$on('warningDetails', val => {
      this.warningTypeValue = '全部'
      this.warningLICENSE_PLATEValue = ''
      this.openWarningDetails = val
      this.coverIsShow = val
    })
    // 显示底部列表
    eventBus.$on('toShowFooter', () => {
      this.hideFooter = false;
    })
    // 隐藏底部列表
    eventBus.$on('toHideFooter', () => {
      this.hideFooter = true;
    })
    // 显示报警信息
    eventBus.$on('toShowWarningInfo', () => {
      this.showWarningInfo = true;
    })
    // 隐藏报警信息
    eventBus.$on('toHideWarningInfo', () => {
      this.showWarningInfo = false;
    })
    // 右键视频监控窗口
    eventBus.$on('showCCTV_Rubbish', val => {
      this.dialogVisibleCCTV = true
      this.dialogVisibleCCTVTitle = val.carNo
      // var url = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&devIdno=' + val.simNo + '&account=' + localStorage.getItem('VIDEO_UID') + '&password=' + localStorage.getItem('VIDEO_PWD')
      var url = 'http://111.160.78.62:88/808gps/open/player/video.html?lang=zh&vehiIdno=' + val.carNo + '&account=' + localStorage.getItem('VIDEO_UID') + '&password=' + localStorage.getItem('VIDEO_PWD')
      console.log('地址'+url)
      this.dialogVideoUrl = url;
    })
  },
  methods: {

    closeCover () {
      this.coverIsShow = false
      this.openWarningDetails = false
      eventBus.$emit('closeCover')
    },
    // 获取区域名称
    async getAreaName () {
      // const { data } = await this.$Http.get(`/InspectionGuidance/GetLoginUserApi?ClientNo=`+localStorage.getItem('CLIENT_NO'))
      // console.log(data)
      // this.areaName = data[0].USERNAME
    },
    // 查询报警信息
    searchWarningData () {
      this.warningData = this.originalData
      if (this.warningTypeValue !== '全部') this.warningData = this.warningData.filter(item => this.warningTypeValue === item.TYPE)
      if (this.warningLICENSE_PLATEValue !== '') this.warningData = this.warningData.filter(item => item.LICENSE_PLATE.includes(this.warningLICENSE_PLATEValue))
      // else this.warningData = this.originalData
      // console.log('aa' + this.originalData)
      // console.log('b' + this.warningData)
      // this.warningGroupValue=`${this.$route.query.ClientNo}`
      // if (this.warningGroupValue !== '0000001') 
      //   this.warningData = this.warningData.filter(item => this.warningGroupValue === item.CLIENT_NO)
      // console.log('a' + this.originalData)
      // console.log('b' + this.warningData)
    },
    // 导出Excel
    exportExcel () {
      const excelName = document.querySelector('.group li.selected span').innerText + '报警信息'
      const tHeader = ['编号', '姓名', '社区', '小区', '报警位置', '报警时间', '经度', '纬度', '报警类型']
      const filterVal = ['ID', 'NAME', 'COMMUNITY_NAME', 'VILLAGE_NAME', '', 'ALARM_DATE', 'LONGITUDE', 'LATITUDE', 'ALARM_TYPE']
      export2Excel(tHeader, filterVal, this.warningData, excelName)
    },
    // 信息列表窗口缩放
    resize (x, y) {
      document.querySelector('.el-footer').style.height = this.footerHeight - y + 'px'
      document.querySelector('.el-container').style.height = this.containerHeight + y + 'px'
      eventBus.$emit('mapSize', y)
    },
    // 报警列表信息缩放
    resizeWidth (x) {
      document.querySelector('.el-aside').style.width = this.asideWidth - x + 'px'
      document.querySelector('.el-main').style.width = this.mainWidth + x + 'px !important'
    },
    // 退出登录
    loginOut () {
      window.location.href = ''
      window.close()
      this.avatarShow = false
    },
    // 格式化单元格内容
    formatter2 (row, column, cellValue, index) {
      // console.log(cellValue)
      if (cellValue === 0) {
        return ' '
      }
      else {
        return cellValue
      }
    },
    alarmchind () {
      this.closeCover()
    },
    // 隐藏底部列表
    toHideFooter() {
      this.hideFooter = true;
      eventBus.$emit('toHideFooter');
    }
  }
}
</script>

<style scoped lang="less">
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-header {
  height: 60px;
  .logo {
    float: left;
    line-height: 60px;
    img {
      height: 50px;
      margin-right: 20px;
      vertical-align: middle;
    }
  }
  .title_name {
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    color: #007ACC;
    font-weight: 600;
  }
  .title_company {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #007ACC;
    font-weight: 200;
  }
  .avatar {
    height: 60px;
    line-height: 60px;
    float: right;
    position: relative;
    .header_img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      width: 40px;
      height: 40px;
      // background-color: #000;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .account_name {
      cursor: pointer;
      color: #007ACC;
    }
    .account_info {
      width: 100px;
      line-height: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      span {
        display: block;
        text-align: center;
        line-height: 22px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #007ACC;
        }
      }
    }
  }
}

.el-container {
  flex: 1;
}

.top_box {
  display: flex;
  height: 30.938vw;
  .sidebar {
    width: 10.417vw;
    display: none;
  }
  .content {
    flex: 1;
    .content-box {
      display: flex;
      // position: relative;
      .map_view {
        flex: 1;
      }
    }
  }
}

.el-footer {
  width: 100%;
  min-height: 19.417vw !important;
  max-height: 40.417vw;
  z-index: 3;
  background: #fff;
  &.height0 {
    min-height: 0 !important;
    height: 0 !important;
  }
  // position: relative;
  // margin-bottom: 20px;
  .footer_title {
    line-height: 1.963vw;
    background-color: rgb(32, 105, 179);
    color: #fff;
    // cursor: s-resize;
    padding-left: 1.042vw;
    font-weight: 600;
    i {
      float: right;
      margin-right: 0.521vw;
      cursor: pointer;
    }
  }
}
.el-aside {
  // height: 300px;
  overflow: hidden;
  /deep/.handle-tm {
    display: none !important;
  }
}
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.warning_details {
  width: 90%;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  overflow: hidden;
  padding-bottom: 10px;
  h2 {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    color: #666;
    border-bottom: 1px solid #ccc;
    span {
      margin-right: 5px;
    }
    i {
      margin-left: 90%;
    }
  }
  .warning_menu {
    height: 45px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding-left: 5px;
    span {
      margin-left: 10px;
      display: flex;
      align-items: center;
      color: #666;
      &.warning_nums {
        margin-left: 0;
        // justify-content: center;
        padding: 0 4px;
        border-bottom: 1px solid #ccc;
      }
    }
    .el-select {
      width: 150px;
      height: 26px;
    }
    #group {
      width: 100px;
    }
  }
  .warningContent {
    height: 330px;
    // overflow-y: auto;
    .el-table {
      height: 100%;
      /deep/.el-table__body-wrapper {
        height: calc(~'100% - 35px');
        overflow-y: auto;
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
  }
}

.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  // bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
/deep/.handle-tm {
  width: 100% !important;
  height: 5PX;
  top: -5px !important;
}
</style>
